<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>城市图书馆</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.8/css/bootstrap.min.css" rel="stylesheet">
    <!-- Element UI -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.14/theme-chalk/index.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/7.0.0/css/all.min.css">
     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!-- Vue.js -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.14/vue.min.js"></script>
    <!-- Element UI -->
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.14/index.min.js"></script>
    <style>
        :root {
            --primary: #4361ee;
            --secondary: #3f37c9;
            --accent: #4895ef;
            --light: #f8f9fa;
            --dark: #212529;
            --success: #4cc9f0;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            color: var(--dark);
            overflow-x: hidden;
            padding-bottom: 70px;
        }

        .navbar {
            background: rgba(67, 97, 238, 0.9);
            backdrop-filter: blur(10px);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            padding: 15px 0;
        }

        .hero-section {
            height: 50vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            position: relative;
            overflow: hidden;
            background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('https://images.unsplash.com/photo-1507842217343-583bb7270b66?ixlib=rb-4.0.3&auto=format&fit=crop&w=1953&q=80');
            background-size: cover;
            background-position: center;
            color: white;
            border-radius: 0 0 30px 30px;
        }

        .hero-content {
            z-index: 2;
            padding: 1.5rem;
            background: rgba(67, 97, 238, 0.7);
            border-radius: 20px;
            backdrop-filter: blur(10px);
            max-width: 90%;
        }

        .section-title {
            position: relative;
            text-align: center;
            margin-bottom: 20px;
            padding-bottom: 10px;
        }

        .section-title h2 {
            font-size: 1.5rem;
            display: inline-block;
            padding: 8px 15px;
            background: white;
            border-radius: 50px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            position: relative;
            z-index: 1;
        }

        .section-title h2::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 12px;
            background: var(--success);
            bottom: 3px;
            left: 0;
            z-index: -1;
            border-radius: 50px;
        }

        .service-card {
            background: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            height: 100%;
            border: 2px solid transparent;
            margin-bottom: 15px;
        }

        .service-card:hover {
            transform: translateY(-3px);
            border-color: var(--primary);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }

        .service-img {
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 2rem;
        }

        .service-content {
            padding: 15px;
        }

        .book-card {
            background: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            margin-bottom: 15px;
        }

        .book-img {
            height: 150px;
            background-size: cover;
            background-position: center;
        }

        .book-content {
            padding: 12px;
        }

        .stats-section {
            background: rgba(255, 255, 255, 0.8);
            border-top: 1px solid rgba(0, 0, 0, 0.05);
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }

        .stat-item {
            text-align: center;
            padding: 12px;
        }

        .stat-number {
            font-size: 1.8rem;
            font-weight: 800;
            background: linear-gradient(45deg, var(--primary), var(--accent));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 5px;
        }

        .form-control {
            background: #f8f9fa;
            border: 2px solid #e9ecef;
            color: var(--dark);
            padding: 10px 12px;
            border-radius: 12px;
            margin-bottom: 12px;
            transition: all 0.3s ease;
            font-size: 0.9rem;
        }

        .form-control:focus {
            background: white;
            border-color: var(--primary);
            box-shadow: 0 0 0 0.25rem rgba(67, 97, 238, 0.25);
            color: var(--dark);
        }

        footer {
            background: rgba(67, 97, 238, 0.9);
            padding: 15px 0;
            text-align: center;
            color: rgba(255, 255, 255, 0.7);
        }

        .btn-custom {
            background: linear-gradient(45deg, var(--primary), var(--accent));
            border: none;
            padding: 8px 15px;
            border-radius: 30px;
            color: white;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(67, 97, 238, 0.4);
            font-size: 0.9rem;
        }

        .btn-custom:hover {
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0 10px 25px rgba(67, 97, 238, 0.6);
        }

        .floating-element {
            position: absolute;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            animation: float 15s infinite ease-in-out;
            z-index: 0;
        }

        @keyframes float {
            0% { transform: translate(0, 0) rotate(0deg); }
            25% { transform: translate(10px, 10px) rotate(90deg); }
            50% { transform: translate(0, 20px) rotate(180deg); }
            75% { transform: translate(-10px, 10px) rotate(270deg); }
            100% { transform: translate(0, 0) rotate(360deg); }
        }

        .floating-elements {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            pointer-events: none;
        }

        .bottom-nav {
            position: fixed;
            bottom: 0;
            width: 100%;
            background: white;
            box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            padding: 5px 0;
        }

        .nav-item {
            text-align: center;
            padding: 8px 0;
            color: var(--dark);
            text-decoration: none;
            display: block;
            font-size: 0.8rem;
        }

        .nav-item.active {
            color: var(--primary);
            font-weight: bold;
        }

        .nav-item i {
            display: block;
            font-size: 1.1rem;
            margin-bottom: 3px;
        }

        .search-bar {
            background: rgba(255, 255, 255, 0.9);
            border-radius: 30px;
            padding: 6px 12px;
            margin: 12px 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }

        .category-chip {
            display: inline-block;
            background: rgba(67, 97, 238, 0.1);
            color: var(--primary);
            padding: 4px 12px;
            border-radius: 30px;
            margin: 4px;
            font-size: 0.8rem;
            cursor: pointer;
        }

        .category-chip.active {
            background: var(--primary);
            color: white;
        }

        .event-card {
            background: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            margin-bottom: 15px;
            border-left: 4px solid var(--primary);
        }

        .event-date {
            background: var(--primary);
            color: white;
            padding: 8px;
            text-align: center;
            font-weight: bold;
            font-size: 0.8rem;
        }

        .event-content {
            padding: 12px;
        }

        .el-carousel__item {
            border-radius: 15px;
            overflow: hidden;
        }

        .notice-card {
            background: white;
            border-radius: 15px;
            padding: 15px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            margin-bottom: 15px;
        }

        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 120px;
            height: 120px;
            line-height: 120px;
            text-align: center;
        }

        .avatar {
            width: 120px;
            height: 120px;
            display: block;
        }

        @media (max-width: 768px) {
            .hero-content h1 {
                font-size: 1.5rem;
            }
            
            .hero-content p {
                font-size: 0.9rem;
            }
            
            .section-padding {
                padding: 30px 0;
            }
            
            .container {
                padding: 0 8px;
            }
            
            .service-img {
                height: 80px;
                font-size: 1.5rem;
            }
            
            .service-content {
                padding: 12px;
            }
            
            .book-img {
                height: 130px;
            }
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 浮动装饰元素 -->
        <div class="floating-elements" id="floatingElements"></div>

        <!-- 导航栏 -->
        <nav class="navbar navbar-expand-lg navbar-dark fixed-top">
            <div class="container">
                <a class="navbar-brand" href="#">
                    <h3 class="mb-0">城市<span style="color: #ffd166;">图书馆</span></h3>
                </a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav ms-auto">
                        <li class="nav-item">
                            <a class="nav-link active" href="#home">首页</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#books">图书</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#events">活动</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#services">服务</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#member">会员</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

        <!-- 英雄区域 -->
        <section class="hero-section" id="home">
            <div class="container">
                <div class="hero-content">
                    <h1 class="display-6 fw-bold">发现知识的海洋</h1>
                    <p class="lead">城市图书馆为您提供丰富的图书资源和文化活动，营造浓郁书香氛围</p>
                    <button class="btn btn-custom mt-2" @click="showSearchDialog = true">立即搜索</button>
                </div>
            </div>
        </section>

        <!-- 搜索栏 -->
        <div class="search-bar">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="搜索图书、作者、主题..." v-model="searchKeyword">
                <button class="btn btn-custom" type="button" @click="searchBooks">
                    <i class="fas fa-search"></i>
                </button>
            </div>
        </div>

        <!-- 分类导航 -->
        <div class="container mb-3">
            <div class="text-center">
                <span class="category-chip" :class="{active: selectedCategory === ''}" @click="selectCategory('')">全部</span>
                <span class="category-chip" :class="{active: selectedCategory === 'literature'}" @click="selectCategory('literature')">文学</span>
                <span class="category-chip" :class="{active: selectedCategory === 'technology'}" @click="selectCategory('technology')">科技</span>
                <span class="category-chip" :class="{active: selectedCategory === 'history'}" @click="selectCategory('history')">历史</span>
                <span class="category-chip" :class="{active: selectedCategory === 'art'}" @click="selectCategory('art')">艺术</span>
                <span class="category-chip" :class="{active: selectedCategory === 'children'}" @click="selectCategory('children')">儿童</span>
            </div>
        </div>

        <!-- 轮播公告 -->
        <div class="container mb-3">
            <el-carousel height="100px" indicator-position="outside">
                <el-carousel-item v-for="item in notices" :key="item.id">
                    <div class="notice-card d-flex align-items-center">
                        <div class="me-3 text-primary">
                            <i class="fas fa-bullhorn fa-2x"></i>
                        </div>
                        <div>
                            <h5 class="mb-1">{{ item.title }}</h5>
                            <p class="mb-0 text-muted small">{{ item.content }}</p>
                        </div>
                    </div>
                </el-carousel-item>
            </el-carousel>
        </div>

        <!-- 热门图书 -->
        <section class="section-padding" id="books">
            <div class="container">
                <div class="section-title">
                    <h2>热门图书</h2>
                </div>
                <div class="row">
                    <div class="col-6" v-for="book in filteredBooks" :key="book.id">
                        <div class="book-card">
                            <div class="book-img" :style="{background: book.bgColor}"></div>
                            <div class="book-content">
                                <h6>{{ book.title }}</h6>
                                <p class="text-muted small mb-1">{{ book.author }}</p>
                                <div class="d-flex justify-content-between align-items-center">
                                    <span class="text-warning small"><i class="fas fa-star"></i> {{ book.rating }}</span>
                                    <span :class="book.available ? 'text-success' : 'text-danger'" class="small">{{ book.available ? '可借阅' : '已借出' }}</span>
                                </div>
                                <button class="btn btn-custom w-100 mt-2 small" @click="borrowBook(book)" :disabled="!book.available">借阅</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 图书馆服务 -->
        <section class="section-padding bg-white" id="services">
            <div class="container">
                <div class="section-title">
                    <h2>我们的服务</h2>
                </div>
                <div class="row g-2">
                    <div class="col-6" v-for="service in services" :key="service.id">
                        <div class="service-card">
                            <div class="service-img" :style="{background: service.bgColor}">
                                <i :class="service.icon"></i>
                            </div>
                            <div class="service-content">
                                <h6>{{ service.title }}</h6>
                                <p class="small mb-0">{{ service.description }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 活动日历 -->
        <section class="section-padding" id="events">
            <div class="container">
                <div class="section-title">
                    <h2>近期活动</h2>
                </div>
                <div class="event-card" v-for="event in events" :key="event.id">
                    <div class="row g-0">
                        <div class="col-3">
                            <div class="event-date">
                                <div>{{ event.month }}</div>
                                <div style="font-size: 1.2rem; font-weight: bold;">{{ event.day }}</div>
                                <div>{{ event.weekday }}</div>
                            </div>
                        </div>
                        <div class="col-9">
                            <div class="event-content">
                                <h6>{{ event.title }}</h6>
                                <p class="text-muted small mb-1">{{ event.description }}</p>
                                <div class="d-flex justify-content-between small">
                                    <span><i class="fas fa-clock me-1"></i> {{ event.time }}</span>
                                    <span><i class="fas fa-map-marker-alt me-1"></i> {{ event.location }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 统计数据区域 -->
        <section class="stats-section section-padding">
            <div class="container">
                <div class="row">
                    <div class="col-6 col-md-3">
                        <div class="stat-item">
                            <div class="stat-number" data-count="500000">{{ stats.books }}</div>
                            <h6>藏书量</h6>
                        </div>
                    </div>
                    <div class="col-6 col-md-3">
                        <div class="stat-item">
                            <div class="stat-number" data-count="1200000">{{ stats.borrowed }}</div>
                            <h6>年借阅量</h6>
                        </div>
                    </div>
                    <div class="col-6 col-md-3">
                        <div class="stat-item">
                            <div class="stat-number" data-count="200">{{ stats.seats }}</div>
                            <h6>座位数</h6>
                        </div>
                    </div>
                    <div class="col-6 col-md-3">
                        <div class="stat-item">
                            <div class="stat-number" data-count="300">{{ stats.events }}</div>
                            <h6>年活动</h6>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 会员中心 -->
        <section class="section-padding bg-white" id="member">
            <div class="container">
                <div class="section-title">
                    <h2>会员中心</h2>
                </div>
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex align-items-center mb-3">
                            <el-avatar :size="60" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
                            <div class="ms-3">
                                <h5 class="mb-0">张三</h5>
                                <p class="text-muted mb-0">金牌会员</p>
                            </div>
                        </div>
                        
                        <div class="row text-center my-3">
                            <div class="col-4">
                                <h5>{{ memberInfo.borrowed }}</h5>
                                <p class="text-muted small mb-0">在借图书</p>
                            </div>
                            <div class="col-4">
                                <h5>{{ memberInfo.reserved }}</h5>
                                <p class="text-muted small mb-0">预约图书</p>
                            </div>
                            <div class="col-4">
                                <h5>{{ memberInfo.points }}</h5>
                                <p class="text-muted small mb-0">积分</p>
                            </div>
                        </div>
                        
                        <div class="d-grid gap-2">
                            <button class="btn btn-custom" @click="showMemberDialog = true">
                                <i class="fas fa-user me-2"></i>个人中心
                            </button>
                            <button class="btn btn-outline-primary" @click="showBorrowHistory = true">
                                <i class="fas fa-history me-2"></i>借阅记录
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 底部导航 -->
        <nav class="bottom-nav d-lg-none">
            <div class="container">
                <div class="row text-center">
                    <div class="col">
                        <a href="#home" class="nav-item" :class="{active: activeTab === 'home'}" @click="setActiveTab('home')">
                            <i class="fas fa-home" style="width: 100%;"></i>
                            <span>首页</span>
                        </a>
                    </div>
                    <div class="col">
                        <a href="#books" class="nav-item" :class="{active: activeTab === 'books'}" @click="setActiveTab('books')">
                            <i class="fas fa-book" style="width: 100%;"></i>
                            <span>图书</span>
                        </a>
                    </div>
                    <div class="col">
                        <a href="#events" class="nav-item" :class="{active: activeTab === 'events'}" @click="setActiveTab('events')">
                            <i class="fas fa-calendar-alt" style="width: 100%;"></i>
                            <span>活动</span>
                        </a>
                    </div>
                    <div class="col">
                        <a href="#member" class="nav-item" :class="{active: activeTab === 'member'}" @click="setActiveTab('member')">
                            <i class="fas fa-user" style="width: 100%;"></i>
                            <span>我的</span>
                        </a>
                    </div>
                </div>
            </div>
        </nav>

        <!-- 页脚 -->
        <footer>
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <p class="small">&copy; 2023 城市图书馆. 打造书香城市，传播知识文化。</p>
                    </div>
                </div>
            </div>
        </footer>

        <!-- 搜索对话框 -->
        <el-dialog title="图书搜索" :visible.sync="showSearchDialog" width="90%">
            <el-form>
                <el-form-item label="关键词">
                    <el-input v-model="searchForm.keyword" placeholder="请输入书名、作者或ISBN"></el-input>
                </el-form-item>
                <el-form-item label="分类">
                    <el-select v-model="searchForm.category" placeholder="请选择分类" style="width: 100%;">
                        <el-option label="全部" value=""></el-option>
                        <el-option label="文学" value="literature"></el-option>
                        <el-option label="科技" value="technology"></el-option>
                        <el-option label="历史" value="history"></el-option>
                        <el-option label="艺术" value="art"></el-option>
                        <el-option label="儿童" value="children"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态">
                    <el-radio-group v-model="searchForm.status">
                        <el-radio label="">全部</el-radio>
                        <el-radio label="available">可借阅</el-radio>
                        <el-radio label="unavailable">已借出</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="showSearchDialog = false">取 消</el-button>
                <el-button type="primary" @click="performSearch">搜 索</el-button>
            </span>
        </el-dialog>

        <!-- 会员信息对话框 -->
        <el-dialog title="个人信息" :visible.sync="showMemberDialog" width="90%">
            <el-form>
                <div class="text-center mb-4">
                    <el-upload
                        class="avatar-uploader"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                        <img v-if="memberInfo.avatar" :src="memberInfo.avatar" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </div>
                <el-form-item label="姓名">
                    <el-input v-model="memberInfo.name"></el-input>
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input v-model="memberInfo.phone"></el-input>
                </el-form-item>
                <el-form-item label="邮箱">
                    <el-input v-model="memberInfo.email"></el-input>
                </el-form-item>
                <el-form-item label="证件号">
                    <el-input v-model="memberInfo.idCard" disabled></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="showMemberDialog = false">取 消</el-button>
                <el-button type="primary" @click="saveMemberInfo">保 存</el-button>
            </span>
        </el-dialog>

        <!-- 借阅记录对话框 -->
        <el-dialog title="借阅记录" :visible.sync="showBorrowHistory" width="90%">
            <el-table :data="borrowHistory" style="width: 100%">
                <el-table-column prop="title" label="书名" width="150"></el-table-column>
                <el-table-column prop="borrowDate" label="借阅日期" width="120"></el-table-column>
                <el-table-column prop="returnDate" label="应还日期" width="120"></el-table-column>
                <el-table-column prop="status" label="状态">
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.status === '已归还' ? 'success' : 'warning'">{{ scope.row.status }}</el-tag>
                    </template>
                </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button @click="showBorrowHistory = false">关 闭</el-button>
            </span>
        </el-dialog>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.8/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // 创建Vue实例
        new Vue({
            el: '#app',
            data() {
                return {
                    activeTab: 'home',
                    showSearchDialog: false,
                    showMemberDialog: false,
                    showBorrowHistory: false,
                    searchKeyword: '',
                    selectedCategory: '',
                    searchForm: {
                        keyword: '',
                        category: '',
                        status: ''
                    },
                    notices: [
                        { id: 1, title: '暑期阅读活动开启', content: '7月1日-8月31日，参与暑期阅读活动赢取精美礼品' },
                        { id: 2, title: '新增电子资源', content: '图书馆新增5000册电子书，可通过APP免费阅读' },
                        { id: 3, title: '延长开放时间', content: '自6月1日起，周末开放时间延长至晚上10点' }
                    ],
                    books: [
                        { id: 1, title: '百年孤独', author: '加西亚·马尔克斯', rating: 4.8, available: true, bgColor: 'linear-gradient(45deg, #ff9a9e, #fad0c4)' },
                        { id: 2, title: '人类简史', author: '尤瓦尔·赫拉利', rating: 4.7, available: true, bgColor: 'linear-gradient(45deg, #a1c4fd, #c2e9fb)' },
                        { id: 3, title: '活着', author: '余华', rating: 4.9, available: false, bgColor: 'linear-gradient(45deg, #d4fc79, #96e6a1)' },
                        { id: 4, title: '三体', author: '刘慈欣', rating: 4.6, available: true, bgColor: 'linear-gradient(45deg, #ffecd2, #fcb69f)' },
                        { id: 5, title: '明朝那些事儿', author: '当年明月', rating: 4.5, available: true, bgColor: 'linear-gradient(45deg, #ff9a9e, #fad0c4)' },
                        { id: 6, title: '白夜行', author: '东野圭吾', rating: 4.7, available: false, bgColor: 'linear-gradient(45deg, #a1c4fd, #c2e9fb)' }
                    ],
                    services: [
                        { id: 1, title: '图书借阅', description: '超过50万册图书可供借阅', icon: 'fas fa-book', bgColor: 'linear-gradient(45deg, #ff9a9e, #fad0c4)' },
                        { id: 2, title: '数字资源', description: '电子书、数据库等数字资源', icon: 'fas fa-laptop', bgColor: 'linear-gradient(45deg, #a1c4fd, #c2e9fb)' },
                        { id: 3, title: '读者活动', description: '读书会、讲座、展览等活动', icon: 'fas fa-users', bgColor: 'linear-gradient(45deg, #d4fc79, #96e6a1)' },
                        { id: 4, title: '儿童专区', description: '专为儿童设计的阅读空间', icon: 'fas fa-child', bgColor: 'linear-gradient(45deg, #ffecd2, #fcb69f)' },
                        { id: 5, title: '自习空间', description: '安静舒适的学习环境', icon: 'fas fa-book-reader', bgColor: 'linear-gradient(45deg, #d4fc79, #96e6a1)' },
                        { id: 6, title: '文献传递', description: '获取国内外文献资料', icon: 'fas fa-exchange-alt', bgColor: 'linear-gradient(45deg, #ff9a9e, #fad0c4)' }
                    ],
                    events: [
                        { id: 1, month: '6月', day: '15', weekday: '周六', title: '作家见面会：当代文学创作分享', description: '著名作家将分享创作心得，并与读者互动交流', time: '14:00-16:00', location: '三楼报告厅' },
                        { id: 2, month: '6月', day: '18', weekday: '周二', title: '儿童绘本阅读活动', description: '专为3-6岁儿童设计的互动绘本阅读活动', time: '10:00-11:30', location: '儿童阅览室' },
                        { id: 3, month: '6月', day: '22', weekday: '周六', title: '数字资源使用培训', description: '教授如何使用图书馆的电子资源和数据库', time: '15:00-17:00', location: '二楼培训室' },
                        { id: 4, month: '7月', day: '5', weekday: '周三', title: '书法艺术讲座', description: '邀请知名书法家讲解中国书法艺术', time: '19:00-20:30', location: '一楼大厅' }
                    ],
                    stats: {
                        books: '500K',
                        borrowed: '1.2M',
                        seats: '200',
                        events: '300'
                    },
                    memberInfo: {
                        name: '张三',
                        phone: '138****8888',
                        email: 'zhangsan@example.com',
                        idCard: '110***********0012',
                        avatar: '',
                        borrowed: 3,
                        reserved: 2,
                        points: 1280
                    },
                    borrowHistory: [
                        { title: '百年孤独', borrowDate: '2023-05-10', returnDate: '2023-06-10', status: '已归还' },
                        { title: '人类简史', borrowDate: '2023-05-20', returnDate: '2023-06-20', status: '已归还' },
                        { title: '三体', borrowDate: '2023-06-01', returnDate: '2023-07-01', status: '借阅中' },
                        { title: '白夜行', borrowDate: '2023-06-05', returnDate: '2023-07-05', status: '借阅中' }
                    ]
                }
            },
            computed: {
                filteredBooks() {
                    return this.books.filter(book => {
                        const matchesCategory = this.selectedCategory === '' || 
                              (this.selectedCategory === 'literature' && ['百年孤独', '活着'].includes(book.title)) ||
                              (this.selectedCategory === 'technology' && ['人类简史', '三体'].includes(book.title));
                        
                        const matchesKeyword = this.searchKeyword === '' || 
                              book.title.includes(this.searchKeyword) || 
                              book.author.includes(this.searchKeyword);
                        
                        return matchesCategory && matchesKeyword;
                    });
                }
            },
          
            mounted() {
                // 创建浮动装饰元素
                this.createFloatingElements();
                
                // 初始化数字动画
                this.initNumberAnimation();
            },
            methods: {
                createFloatingElements() {
                    const container = document.getElementById('floatingElements');
                    const colors = [
                        'var(--primary)', 
                        'var(--secondary)', 
                        'var(--accent)', 
                        '#a663cc', 
                        '#ff85a2'
                    ];
                    
                    for (let i = 0; i < 15; i++) {
                        const element = document.createElement('div');
                        element.classList.add('floating-element');
                        
                        // 随机大小
                        const size = Math.random() * 40 + 10;
                        element.style.width = `${size}px`;
                        element.style.height = `${size}px`;
                        
                        // 随机位置
                        element.style.left = `${Math.random() * 100}%`;
                        element.style.top = `${Math.random() * 100}%`;
                        
                        // 随机颜色
                        const color = colors[Math.floor(Math.random() * colors.length)];
                        if (color.startsWith('var(')) {
                            const varName = color.match(/var\((.*)\)/)[1];
                            const computedColor = getComputedStyle(document.documentElement)
                                .getPropertyValue(varName.trim());
                            element.style.background = computedColor + '30';
                        } else {
                            element.style.background = color + '30';
                        }
                        
                        // 随机动画延迟
                        element.style.animationDelay = `${Math.random() * 5}s`;
                        
                        container.appendChild(element);
                    }
                },
                
                initNumberAnimation() {
                    // 数字动画效果
                    function animateValue(obj, start, end, duration) {
                        let startTimestamp = null;
                        const step = (timestamp) => {
                            if (!startTimestamp) startTimestamp = timestamp;
                            const progress = Math.min((timestamp - startTimestamp) / duration, 1);
                            obj.innerHTML = Math.floor(progress * (end - start) + start);
                            if (progress < 1) {
                                window.requestAnimationFrame(step);
                            }
                        };
                        window.requestAnimationFrame(step);
                    }

                    // 滚动到视图时触发动画
                    const observerOptions = {
                        root: null,
                        rootMargin: "0px",
                        threshold: 0.5
                    };

                    const observer = new IntersectionObserver((entries) => {
                        entries.forEach(entry => {
                            if (entry.isIntersecting) {
                                const countElements = entry.target.querySelectorAll('.stat-number');
                                countElements.forEach(el => {
                                    const count = parseInt(el.getAttribute('data-count'));
                                    animateValue(el, 0, count, 2000);
                                });
                                observer.unobserve(entry.target);
                            }
                        });
                    }, observerOptions);

                    // 监听统计区域
                    const statsSection = document.querySelector('.stats-section');
                    if (statsSection) {
                        observer.observe(statsSection);
                    }
                },
                    setActiveTab(tab) {
                    this.activeTab = tab;
                },
                selectCategory(category) {
                    this.selectedCategory = category;
                },
                searchBooks() {
                    if (this.searchKeyword) {
                        this.$message.success(`搜索"${this.searchKeyword}"的结果`);
                    } else {
                        this.$message.warning('请输入搜索关键词');
                    }
                },
                performSearch() {
                    this.showSearchDialog = false;
                    this.$message.success('搜索完成');
                },
                borrowBook(book) {
                    if (book.available) {
                        this.$confirm(`确定要借阅《${book.title}》吗？`, '借阅确认', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            this.$message.success('借阅成功！请在30天内归还');
                        }).catch(() => {
                            this.$message.info('已取消借阅');
                        });
                    }
                },
                handleAvatarSuccess(res, file) {
                    this.memberInfo.avatar = URL.createObjectURL(file.raw);
                },
                beforeAvatarUpload(file) {
                    const isJPG = file.type === 'image/jpeg';
                    const isLt2M = file.size / 1024 / 1024 < 2;

                    if (!isJPG) {
                        this.$message.error('上传头像图片只能是 JPG 格式!');
                    }
                    if (!isLt2M) {
                        this.$message.error('上传头像图片大小不能超过 2MB!');
                    }
                    return isJPG && isLt2M;
                },
                saveMemberInfo() {
                    this.showMemberDialog = false;
                    this.$message.success('信息保存成功');
                }
            }
        });

        // 导航栏滚动效果
        window.addEventListener('scroll', function() {
            const navbar = document.querySelector('.navbar');
            if (window.scrollY > 50) {
                navbar.style.padding = '10px 0';
                navbar.style.boxShadow = '0 5px 20px rgba(0, 0, 0, 0.1)';
            } else {
                navbar.style.padding = '15px 0';
                navbar.style.boxShadow = 'none';
            }
        });

        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    window.scrollTo({
                        top: target.offsetTop - 70,
                        behavior: 'smooth'
                    });
                }
            });
        });

        // 底部导航激活状态切换
        $('.nav-item').on('click', function() {
            $('.nav-item').removeClass('active');
            $(this).addClass('active');
        });

        // 分类标签切换
        $('.category-chip').on('click', function() {
            $('.category-chip').removeClass('active');
            $(this).addClass('active');
        });
    </script>
</body>
</html>